<template>
  <div class="body-pl">
    <HeaDer></HeaDer>
    <div class="top-pl">
      <div class="row-pl">
        <div class="left-pl">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumb">{{item.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="right-pl">
          <el-input
            placeholder="请输入产品名称"
            v-model="queryParams.productName"
            @keyup.enter.native="getList">
            <template #suffix>
              <i class="el-icon-search" @click="getList" style=" font-size: 18px;cursor: pointer;padding-top: 9px;"></i>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="top-content-pl">
      <div class="row-pl">
        <div class="tabs-pl">
          <div class="left-pl">产品类别：</div>
          <ul class="right-pl right1">
            <li v-for="(item,index) in dict.type.product_type"  @click="tabs1($event,item.value)" :key="item.value">{{item.label}}</li>
          </ul>
        </div>

      </div>
    </div>
    <ul class="main-pl tabs-k3-id ">
      <div class="row-pl">
        <li v-for="item in li_main_pl" :key="item.id">
          <div class="left-pl">
            <img :src="item.templateUrl" alt="">
          </div>
          <div class="right-pl">
            <div class="title-pl">
              {{item.productName}}
            </div>
            <div class="content-pl">
              {{item.productRemark}}
            </div>
            <div class="bottom-pl">
              <div class="left-pl">
                <span class="on">{{item.productType}}</span>
                <i>{{item.organizationName}}</i>
              </div>
              <button class="btn-pl" @click="goto_xiangqing(item.id)">立即查看</button>
            </div>
          </div>
        </li>
		<div style="position: relative;width: 100%;height: 50rem;">
			<pagination style="position: absolute;bottom:0;right: 0;" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			            :limit.sync="queryParams.pageSize" @pagination="getList" />
		</div>
        <el-empty :image-size="200" style="margin-bottom: 26rem; margin-left: 600px" v-if="li_main_pl.length == 0"></el-empty>
      </div>

    </ul>
    <FooTer></FooTer>
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { publicList } from "@/api/qualificationInfo/qualification";
export default {
  dicts: ['product_type', 'product_status', 'customer_industry', 'administrative_area', 'qualification_resume_status'],
  data() {
    return{
      queryParams:{
        pageNum: 1,
        pageSize: 15,
        productType:null,
        productName:null
      },
      total:0,
      breadcrumb:[
        {
          name:"首页",
          path:"/hp"
        },
        {
          name:"服务产品列表",
          path:"/fwcpl"
        }
      ],
      input_top_right:"",
      li_main_pl:[

      ],
    }
  },
  created() {
 this.getList();
  },
  computed: {
    totalItems() {
      return this.li_main_pl.length;
    },
    paginatedData() {
      const start = (this.queryParams.pageNum - 1) * this.pageSize;
      const end = this.queryParams.pageNum * this.queryParams.pageNum;
      return this.li_main_pl.slice(start, end);
    }
  },
  methods:{
    /**
     * 查询已上架的产品列表
     */
    getList(){
      publicList(this.queryParams).then(res=>{
        this.li_main_pl=res.rows;
        this.total = res.total;
      })
    },
 	  goto_xiangqing(id){
      this.$router.push({path:'/fwcpd',query:{id:id}});
	  },
    tabs1(e,value){
      var tabs1=e.target.parentNode.childNodes;
      for (let i = 0; i < tabs1.length; i++) {
        tabs1[i].classList.remove("on");
      }
      e.target.className="on";
      this.queryParams.productType=value;
      this.getList();
    },
    tabs2(e){
      var tabs2=e.target.parentNode.childNodes;
      for (let i = 0; i < tabs2.length; i++) {
        tabs2[i].classList.remove("on");
      }
      e.target.className="on";
    },
    tabs3(e){
      var tabs3=e.target.parentNode.childNodes;
      for (let i = 0; i < tabs3.length; i++) {
        tabs3[i].classList.remove("on");
      }
      e.target.className="on";
    },

    more_pl(e){

      if(e.target.className==="btns-pl"){
        e.target.className="btns-pl on"
      }else{
        e.target.className="btns-pl"
      }
      // console.log(i);
      var more_pl = document.querySelector('.right3');
      console.log(more_pl.className);
      if(more_pl.className==="right-pl right3"){
        more_pl.className="right-pl right3 on"
      }else{
        more_pl.className="right-pl right3"
      }
    },
	handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
    }
  },
  components: {
    HeaDer,
    FooTer
  },
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
::v-deep .top-pl>.row-pl>.left-pl .el-breadcrumb__inner{
	white-space: nowrap;
}
::v-deep .top-pl>.row-pl>.left-pl .el-breadcrumb__item{
	height: 18px;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
	max-width: 400rem;
}
::v-deep .top-pl>.row-pl>.left-pl .el-breadcrumb{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-top: 3px!important;
}
.body-pl {
  height: 100%;
  width:100%;
  /* font: 14rem arial; */
  font-size: 16rem;
  font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
  color: #676767;
}
.top-pl{
  width:100%;
  height:64rem;
  background-color: #f8f9fb;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}
.row-pl{
  width:1532rem;
  margin: 0 auto;
}
.top-pl>.row-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.top-pl>.row-pl>.left-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.top-pl>.row-pl>.right-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46rem;
  width: 360rem;
}
.top-content-pl{
  width: 100%;
}
.top-content-pl>.row-pl{
  box-shadow:0 0 6rem 0 rgba(0, 0, 0, .1);
  padding: 30rem;
  margin-top: 28rem;
  margin-bottom: 30rem;
}
.top-content-pl>.row-pl>.tabs-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 18rem;
}
.top-content-pl>.row-pl>.tabs-pl:last-child{
  margin-bottom: 0rem;
}
.top-content-pl>.row-pl>.tabs-pl>.left-pl{
  white-space: nowrap;
  padding-top: 4rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
  height: 30rem;
  overflow: hidden;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl.on{
  height: auto;
  overflow: auto;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li{
  margin-right: 40rem;
  padding: 3rem 8rem;
  cursor: pointer;
  margin-bottom: 5rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li.on{
  color: #12ba5e;
  background-color: #e9fff3;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li>span{
  pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl{
  padding-right: 22rem;
  background:url(../../assets/images/down.png) no-repeat scroll;
  background-position: right center;
  cursor: pointer;
  white-space: nowrap;
  height: 24rem;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on{
  padding-right: 22rem;
  background:url(../../assets/images/up.png) no-repeat scroll;
  background-position: right center;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>i{
  font-style: normal;
  display: none;
  pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>span{
  pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>span{
  display: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>i{
  font-style: normal;
  display: block;
}
.main-pl{
  width: 100%;
  padding-bottom: 66rem;
  position: relative;
}
.main-pl>.row-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 50rem;
}
.main-pl li{
  width: 48.5%;
  height:176rem;
  background: url(../../assets/images/pl-bg1_03.jpg) no-repeat scroll;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 18rem;
  padding-right: 30rem;
  margin-bottom: 33rem;
}
.main-pl li>.left-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.main-pl li>.left-pl>img{
  width: 82rem;
  height: 120rem;
}
.main-pl li>.right-pl{
  padding-top: 20rem;
  padding-left: 15rem;
  width: 87%;
}
.main-pl li>.right-pl>.title-pl{
  font-size: 18rem;
  margin-bottom: 15rem;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.main-pl li>.right-pl>.content-pl{
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14rem;
  margin-bottom: 30rem;
}
.main-pl li>.right-pl>.bottom-pl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  font-size: 14rem;
}
.main-pl li>.right-pl>.bottom-pl>button{
  font-size: 14rem;
  color: #35a266;
  border: solid 1px #35a266;
  background-color: white;
  padding: 4rem 15rem;
  cursor: pointer;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl{
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span{
  background-color: #e6e8f3;
  color: #62667d;
  padding:2rem 12rem;
  margin-right: 10rem;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>span.color-gold{
  background-color: #f0eedb;
}
.main-pl li>.right-pl>.bottom-pl>.left-pl>i{
  background-color: #ebfff4;
  color: #087d40;
  padding:2rem 12rem;
  font-style: normal;
  max-width: 350rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  display: inline-block;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: #35a266;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #35a266;
}
</style>
